<template>
  <div class="">
    <van-nav-bar
      title="标题"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item" :title="item" />
    </van-list>
  </div>
</template>

<script setup lang="ts">
import { Toast } from "vant";
import { ref } from "vue";
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const onClickLeft = () => history.back();
const onClickRight = () => {
  let msg = confirm("确认删除当前预约吗？");
  if (msg) {
    // 需要调用删除预约接口
    Toast({
      message: "删除成功！",
      position: "top",
    });
  } else {
    Toast({
      message: "删除失败！",
      position: "top",
    });
  }
};

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1);
    }

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 20) {
      finished.value = true;
    }
  }, 1000);
};
</script>
<style lang="less" scoped></style>
